<template>
  <div>
    <h1>$set的使用</h1>
    <h2>next 获取数据更新之后的DOM</h2>
    <h2>$set 是数据发生变换之后.视图层不变的情况</h2>
    <h3>vue是数据驱动的.数据发生变换之后.视图层就会跟着改变</h3>

    <button @click="changeData">修改</button>
    <div>{{ likeFoods }}</div>
    <div>{{ userInfo }}</div>
    <ul class="myTab">
      <li @click="handleClick('A')">组件1</li>
      <li @click="handleClick('B')">组件2</li>
      <li @click="handleClick('C')">组件3</li>
      <li @click="handleClick('D')">组件4</li>
    </ul>
    <keep-alive>

      <component :is="Feature" />
    </keep-alive>
    <h1>mixin学习</h1>
    购物车商品数量{{ cartCount }}
    商品列表{{ cartList }}
    <select name="" id="" v-model="queryParams.classify">
      <option value="1">水果</option>
      <option value="4">母婴</option>
      <option value="3">数码</option>
      <option value="2">汽车用品</option>
    </select>
    {{ cartCount | filterPrice }}
    {{ resultAddress }}
    <router-view></router-view>
  </div>
</template>

<script>
import componentA from "./componentIs/ComponentViewOne.vue"
import componentB from "./componentIs/ComponentViewTwo.vue"
import componentC from "./componentIs/ComponentViewThree.vue"
import componentD from "./componentIs/ComponentViewFour.vue"
import product from "./mixin/product.js"
export default {
  components: {
    componentA,
    componentB,
    componentC,
    componentD,
  },
  props: {},
  mixins: [product],
  data () {
    return {
      queryParams: {
        limit: 5
      },
      likeFoods: ['红烧肉', '红烧排骨', '红烧鱼', '红烧鸡'],
      Feature: "componentA",
      userInfo: {
        name: 'suming',
        age: 18,
        sex: '男',
        address: '北京',
        student: null,
        friends: [{
          name: '张三',
          age: 23
        }]
      }
    }
  },
  computed: {
    resultAddress () {
      // 逻辑 依赖data响应式的数据最终得到结果
      // 收集这里面的依赖. 得到最终结果值. 如果依赖没有改变. 不会重新计算(走缓存)
      setTimeout(() => {
        this.userInfo.address = "上海"
      }, 1000)
      return "中国" + this.userInfo.address
    }
  },


  watch: {
    // // 深度监听数组
    // likeFoods: {
    //   handler () {
    //     console.log('执行组件cartCount修改了')
    //   },
    //   deep: true,
    // },
    // 深度监听对象
    // userInfo: {
    //   handler () {
    //     console.log('深度监听userInfo')
    //   },
    //   deep: true,
    //   immediate: true  //初始化时候执行一次

    // }
    // 'userInfo.age' () {
    //   console.log('深度监听userInfo里面的某一个属性')
    // }
    // 对象里面有20个属性  每一个属性的变换.都会去执行监听函数
    // 但是实际上.我只要监听某一个属性的变换执行回调
    'userInfo.age': {
      handler () {
        console.log('深度监听userInfo里面的某一个属性')
      },
      immediate: true
    }
    // likeFoods () {
    //   console.log('执行组件watch,likeFoods修改')
    // }
  },
  methods: {
    handleClick (params) {
      this.Feature = `component${params}`
    },
    changeData () {
      this.cartCount++
      // 什么情况下使用$set 为什么要用$set  $set为什么能解决这个问题  vue3中为什么不使用$set了
      // bad  :1数组通过下标修改数据2 对象新增属性   3对象删除属性这三种情况下数据变了 视图层不更新
      // this.$set(数组/对象, 下标/key,   新值) = Vue.set    this.$nextTikc = vue.nextTick
      // this.likeFoods[4] = "红烧鸭" 
      // this.userInfo.student = "王其一"
      this.userInfo.age = 19
      // delete this.userInfo.age

      // goods 
      // this.likeFoods[5] = '红烧鸭'
      // this.likeFoods.push('红烧鸭')
      // this.$set(this.likeFoods, 4, '红烧鸭')
      // this.likeFoods.splice(4, 1, "红烧鸭")
      // this.$set(this.userInfo, 'student', '王其一')
      // this.getInitData()

    },
    async getInitData () {
      console.log("请求接口要发送的数据是", this.queryParams)
      // const result = await getList(this.queryParams)
    }
  },
  filters: {
    // filterPrice (price) {
    //   return price + '元'
    // }
  },
  created () {
    console.log("created");
    this.getInitData()
    console.log("likeFoods", this.likeFoods)
  },
  mounted () {

  },
}
</script>
<style scoped>
.myTab {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.myTab li {
  width: 100px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border: 1px solid red;
}
</style>